<template>
  <div class="app-container" v-loading.fullscreen.lock="loading">
    <el-card class="box-card">
      <div class="member">
        <div class="member-img">
          <div class="block"><el-avatar :size="50" :src="userInfo.avatar"></el-avatar></div>
        </div>
        <div class="member-body">
          <div class="member-title">微信用户</div>
          <div class="member-channels">
            <div>
              <label class="member-channels-label">ID:</label> {{ userInfo.sysUserid }}
            </div>
            <div>
              <label class="member-channels-label">来源渠道：</label>
              小程序
            </div>
            <div>
              <label class="member-channels-label">所有登录渠道：</label>
              无
            </div>
          </div>
          <div class="member-info">
            <el-row class="member-info-margin">
              <el-col :span="6" :offset="0">
                真实姓名：{{ userInfo.nickName }}
              </el-col>
              <el-col :span="6" :offset="0">
                性别：{{ userInfo.sex == 0 ? '女' : '男' }}
              </el-col>
              <el-col :span="6" :offset="0">
                <span>手机号：{{ userInfo.phonenumber }}</span>
              </el-col>
              <el-col :span="6" :offset="0">
                注册时间：{{ userInfo.createTime }}
              </el-col>
            </el-row>
            <el-row class="member-info-margin">
              <!-- <el-col :span="6" :offset="0">
                最近浏览：-
              </el-col>
              <el-col :span="6" :offset="0">
                公众号：-
              </el-col>
              <el-col :span="6" :offset="0">
                邀请码：-
              </el-col> -->
              <el-col :span="6" :offset="0">
                会员等级：{{ userInfo.memberName }}
                <span><el-button type="text" size="mini" icon="el-icon-edit" style="color: #000;"
                    @click="memberLevelChange"></el-button>
                </span>
              </el-col>
              <el-col :span="6" :offset="0">
                推荐人：{{ userInfo.parentName }}
                <span><el-button type="text" size="mini" icon="el-icon-edit" style="color: #000;"
                    @click="recommenderHandler"></el-button>
                </span>
                <span><el-button type="text" size="mini" @click="changeDistory">| 修改记录</el-button></span>
              </el-col>
              <el-col :span="6" :offset="0">
                默认收货地址：{{ userInfo.detail || '-' }}
              </el-col>
              <el-col :span="6" :offset="0">
                重置支付密码：
                <span><el-button type="text" size="mini" icon="el-icon-edit" style="color: #000;"
                    @click="resetPasswordHandler"></el-button>
                </span>
              </el-col>
            </el-row>
            <!-- <el-row class="member-info-margin">
              <el-col :span="6" :offset="0">
                修改密码：
              </el-col>
              <el-col :span="6" :offset="0">
                会员过期时间：-
              </el-col>
            </el-row>
            <el-row class="member-info-margin">
              <el-col :span="6" :offset="0">
                登记设备：-
              </el-col>
              <el-col :span="6" :offset="0">
                设备MAC地址：-
              </el-col>
            </el-row> -->
          </div>
        </div>
      </div>
    </el-card>
    <el-card class="box-card" style="margin-top: 30px;">
      <div class="assets">
        <div class="assets-title">
          用户资产
        </div>
        <div class="assets-line">
          <el-row :gutter="40">
            <el-col :span="12">
              <el-row class="assets-line-top" type="flex" justify="space-between">
                <el-col :span="12">
                  <label class="assets-top-label">余额</label>
                  <el-button type="text" size="mini" @click="() => {
                    this.rechargeBalanceOpen = true
                    this.$set(this.balanceForm, 'balance', null)
                  }">充余额</el-button>
                </el-col>
                <el-col :span="1" style="margin-right: 10px;">
                  <el-button type="text" size="mini" @click="detailsHandler('ye')">查看明细</el-button>
                </el-col>
              </el-row>
              <el-row class="assets-line-body">
                <el-col :span="8">
                  <div class="assets-body-label">可用余额</div>
                  <div class="assets-body-value">{{ userInfo.remainingSum }}</div>
                </el-col>
                <el-col :span="8">
                  <div class="assets-body-label">已使用</div>
                  <div class="assets-body-value">{{ userInfo.useRemainingSum }}</div>
                </el-col>
                <el-col :span="8">
                  <div class="assets-body-label">已提现</div>
                  <div class="assets-body-value">{{ userInfo.extractRemainingSum }}</div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12">
              <el-row class="assets-line-top" type="flex" justify="space-between">
                <el-col :span="12">
                  <label class="assets-top-label">积分</label>
                  <el-button type="text" size="mini" @click="() => {
                    this.rechargePointsOpen = true
                    this.$set(this.pointsForm, 'integral', null)
                  }">充积分</el-button>
                </el-col>
                <el-col :span="1" style="margin-right: 15px;">
                  <el-button type="text" size="mini" @click="detailsHandler('jf')">查看明细</el-button>
                </el-col>
              </el-row>
              <el-row class="assets-line-body">
                <el-col :span="12">
                  <div class="assets-body-label">可用积分</div>
                  <div class="assets-body-value">{{ userInfo.creditScore }}</div>
                </el-col>
                <el-col :span="12">
                  <div class="assets-body-label">已使用积分</div>
                  <div class="assets-body-value">{{ userInfo.useCreditScore }}</div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
        <div class="assets-line">
          <el-row :gutter="40">
            <el-col :span="12">
              <el-row class="assets-line-top" type="flex" justify="space-between">
                <el-col :span="12">
                  <label class="assets-top-label">佣金</label>
                </el-col>
                <el-col :span="1" style="margin-right: 10px;">
                  <el-button type="text" size="mini" @click="detailsHandler('yj')">查看明细</el-button>
                </el-col>
              </el-row>
              <el-row class="assets-line-body">
                <el-col :span="8">
                  <div class="assets-body-label">当前佣金</div>
                  <div class="assets-body-value">{{ userInfo.earnings }}</div>
                </el-col>
                <el-col :span="8">
                  <div class="assets-body-label">待结算</div>
                  <div class="assets-body-value">{{ userInfo.staySettleEarnings }}</div>
                </el-col>
                <el-col :span="8">
                  <div class="assets-body-label">已提现</div>
                  <div class="assets-body-value">{{ userInfo.extractEarnings }}</div>
                </el-col>
              </el-row>
            </el-col>
            <!-- <el-col :span="12">
              <el-row class="assets-line-top" type="flex" justify="space-between">
                <el-col :span="12">
                  <label class="assets-top-label">红包</label>
                  <el-button type="text" size="mini">充红包</el-button>
                </el-col>
                <el-col :span="1" style="margin-right: 10px;">
                  <el-button type="text" size="mini">查看明细</el-button>
                </el-col>
              </el-row>
              <el-row class="assets-line-body">
                <el-col :span="6">
                  <div class="assets-body-label">当前可用激活红包</div>
                  <div class="assets-body-value">0.30</div>
                </el-col>
                <el-col :span="6">
                  <div class="assets-body-label">可用冻结红包</div>
                  <div class="assets-body-value">498.70</div>
                </el-col>
                <el-col :span="6">
                  <div class="assets-body-label">已使用激活红包</div>
                  <div class="assets-body-value">0.00</div>
                </el-col>
                <el-col :span="6">
                  <div class="assets-body-label">已使用冻结红包</div>
                  <div class="assets-body-value">0.00</div>
                </el-col>
              </el-row>
            </el-col> -->
          </el-row>
        </div>
        <!-- <div class="assets-line">
          <el-row :gutter="40">
            <el-col :span="12">
              <el-row class="assets-line-top" type="flex" justify="space-between">
                <el-col :span="12">
                  <label class="assets-top-label">优惠券</label>
                </el-col>
                <el-col :span="1" style="margin-right: 10px;">
                  <el-button type="text" size="mini">查看明细</el-button>
                </el-col>
              </el-row>
              <el-row class="assets-line-body">
                <el-col :span="8">
                  <div class="assets-body-label">可使用</div>
                  <div class="assets-body-value">0.30</div>
                </el-col>
                <el-col :span="8">
                  <div class="assets-body-label">已使用</div>
                  <div class="assets-body-value">498.70</div>
                </el-col>
                <el-col :span="8">
                  <div class="assets-body-label">已过期</div>
                  <div class="assets-body-value">0.00</div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12">
            </el-col>
          </el-row>
        </div> -->
      </div>
    </el-card>

    <!-- 更换推荐人 -->
    <el-dialog title="更换推荐人" :visible.sync="recommenderOpen" width="800px">
      <change-recommender @selectUser="selectUser"></change-recommender>
      <div slot="footer">
        <el-row :gutter="10">
          <el-col :span="2" :offset="19"><el-button @click="recommenderOpen = false">取消</el-button></el-col>
          <el-col :span="3" :offset="0"><el-button type="primary" @click="recommenderEdit">确认</el-button></el-col>
          <!-- <el-col :span="4" :offset="0"><el-button type="primary"
              @click="modifiedIntoPlatform">修改成平台</el-button></el-col> -->
        </el-row>
      </div>
    </el-dialog>

    <!-- 推荐人修改记录 -->
    <el-dialog title="修改记录" :visible.sync="modifiedRecordOpen" width="800px">
      <modified-record :userId="userInfo.sysUserid"></modified-record>
    </el-dialog>

    <!-- 修改会员等级 -->
    <el-dialog title="修改会员等级" :visible.sync="memberLevelOpen" width="800px">
      <el-form :model="memberForm" ref="memberForm" :rules="memberRules" label-width="80px">
        <el-form-item label="等级名称">
          <el-select v-model="memberForm.level" placeholder="请选择等级名称" clearable>
            <el-option v-for="item in dict.type.member_all_level" :key="item.value" :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button @click="memberLevelOpen = false">取消</el-button>
        <el-button type="primary" @click="memberLevelEmit">确认</el-button>
      </span>
    </el-dialog>

    <!-- 重置密码 -->
    <el-dialog title="重置密码" :visible.sync="resetPasswordOpen" width="500px">
      <el-form :model="passwordForm" ref="form" :rules="passwordRules" label-width="80px">
        <el-form-item label="密码">
          <el-input v-model="passwordForm.password" placeholder="请输入密码" show-password></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input v-model="passwordForm.password" placeholder="请输入确认密码" show-password></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="resetPasswordOpen = false">取消</el-button>
        <el-button type="primary" @click="resetPasswordOpen = false">确认</el-button>
      </span>
    </el-dialog>

    <!-- 充值余额 -->
    <el-dialog title="充值余额" :visible.sync="rechargeBalanceOpen" width="500px">
      <el-form :model="balanceForm" ref="balanceForm" :rules="balanceRules" label-width="80px">
        <el-form-item label="余额数量" prop="balance">
          <el-input v-model="balanceForm.balance" placeholder="请输入要加/减的余额（-1代表减1余额）"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="balanceForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="rechargeBalanceOpen = false">取消</el-button>
        <el-button type="primary" @click="balanceSubmit">确定</el-button>
      </span>
    </el-dialog>

    <!-- 充值积分 -->
    <el-dialog title="充值积分" :visible.sync="rechargePointsOpen" width="500px">
      <el-form :model="pointsForm" ref="pointsForm" :rules="pointsRules" label-width="80px">
        <el-form-item label="积分数量" prop="integral">
          <el-input v-model="pointsForm.integral" placeholder="请输入要加/减的余额（-1代表减1余额）"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="pointsForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="rechargePointsOpen = false">取消</el-button>
        <el-button type="primary" @click="pointsSubmit">确定</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>
import { getInfo, putReferrer, modifyBalance, modifyIntegral, putPaymentCode, changeMembershipLevel } from '@/api/system/member/memberDetail'
import ChangeRecommender from './components/changeRecommender.vue'
import ModifiedRecord from './components/modifiedRecord.vue';
export default {
  name: 'MemberDetail',
  components: {
    ChangeRecommender,
    ModifiedRecord,
  },
  dicts: ['member_all_level'],
  props: {
    userId: {
      type: [String, Number],
      default: '',
    }
  },
  data() {
    return {
      userInfo: {},
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      recommenderOpen: false,
      modifiedRecordOpen: false,
      memberLevelOpen: false,
      memberForm: {},
      memberRules: {},
      resetPasswordOpen: false,
      passwordForm: {},
      passwordRules: {},
      rechargeBalanceOpen: false,
      balanceForm: {},
      balanceRules: {
        balance: { required: true, message: '余额数量不能为空', trigger: 'blur' }
      },
      rechargePointsOpen: false,
      pointsForm: {},
      pointsRules: {
        integral: { required: true, message: '积分数量不能为空', trigger: 'blur' }
      },
      loading: false,
      selectUserInfo: null,
    }
  },
  mounted() {
    this.getMemberDetail()
  },
  methods: {
    /**查询会员详情 */
    getMemberDetail() {
      this.loading = true
      getInfo({ sysUserid: this.$route.query.userId }).then(res => {
        this.loading = false
        this.userInfo = res.data
      })
    },
    // 更换推荐人
    recommenderHandler() {
      this.recommenderOpen = true
    },
    // 推荐人历史记录
    changeDistory() {
      this.modifiedRecordOpen = true
    },
    // 确认更换推荐人
    recommenderEdit() {
      this.$alert('<i class="el-icon-warning" style="color: #e6a23c;margin: 0 10px 0 0;"></i>是否修改推荐人？', '警告', {
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        dangerouslyUseHTMLString: true
      }).then(({ value }) => {
        let data = {
          sysUserid: this.userInfo.sysUserid,
          newParentId: this.selectUserInfo.userId,
          newParentName: this.selectUserInfo.nickName
        }
        putReferrer(data).then(res => {
          this.$message({
            type: 'success',
            message: '修改成功'
          });
          this.recommenderOpen = false
          this.getMemberDetail()
        })
      }).catch(() => {
      });
    },
    // 修改成平台
    modifiedIntoPlatform() {
      this.$alert('<i class="el-icon-warning" style="color: #e6a23c;margin: 0 10px 0 0;"></i>是否把推荐人修改成平台？', '警告', {
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        dangerouslyUseHTMLString: true
      }).then(({ value }) => {
        this.$message({
          type: 'success',
          message: '你的邮箱是: ' + value
        });
      }).catch(() => {
      });
    },
    detailsHandler(type) {
      let url = null
      switch (type) {
        case 'ye':
          url = '/assets/balance/index'
          break;
        case 'jf':
          url = '/assets/integration/index'
          break;
        case 'yj':
          url = '/assets/commission/index'
          break;
      }
      this.$router.push(url + `?userId=${this.userInfo.sysUserid}`)
    },
    memberLevelChange() {
      this.memberLevelOpen = true
      this.memberForm = {
        userId: this.userInfo.sysUserid,
        level: this.userInfo.memberLevel + ''
      }
    },
    memberLevelEmit() {
      changeMembershipLevel(this.memberForm).then(res => {
        this.$message.success('修改成功')
        this.memberLevelOpen = false
        this.getMemberDetail()
      })
    },
    selectUser(v) {
      this.selectUserInfo = v[0]
    },
    resetPasswordHandler() {
      this.$alert('<i class="el-icon-warning" style="color: #e6a23c;margin: 0 10px 0 0;"></i>是否重置支付密码', '警告', {
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        dangerouslyUseHTMLString: true
      }).then(({ value }) => {
        putPaymentCode({ userId: this.userInfo.sysUserid }).then(res => {
          this.$message.success('密码重置成功')
        })
      }).catch(() => {
      });
    },
    balanceSubmit() {
      this.$refs['balanceForm'].validate(v => {
        if (v) {
          this.balanceForm.userId = this.userInfo.sysUserid
          modifyBalance(this.balanceForm).then(res => {
            this.rechargePointsOpen = false
            this.$message.success('余额修改成功')
            this.getMemberDetail()
          })
        }
      })
    },
    pointsSubmit() {
      this.$refs['pointsForm'].validate(v => {
        if (v) {
          this.pointsForm.userId = this.userInfo.sysUserid
          modifyIntegral(this.pointsForm).then(res => {
            this.rechargePointsOpen = false
            this.$message.success('积分修改成功')
            this.getMemberDetail()
          })
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.member {
  display: flex;
  font-size: 14px;

  .member-img {
    padding-right: 20px;
  }

  .member-body {
    flex: 1;

    .member-title {
      font-size: 18px;
    }

    .member-channels {
      display: flex;
      align-items: center;
      margin: 10px 0;
      font-size: 13px;

      .member-channels-label {
        color: #999;
        font-size: 12px;
        opacity: 0.7;
      }

      & div:nth-child(1), & div:nth-child(2) {
        margin-right: 30px;
      }
    }

    .member-info {
      .member-info-margin {
        margin: 20px 0;
      }
    }
  }
}

.assets {
  .assets-title {
    height: 25px;
    font-size: 15px;
    display: flex;
    align-items: center;

    &::before {
      content: ' ';
      display: inline-block;
      height: 25px;
      width: 3px;
      background-color: #1479f0;
      margin-right: 10px;
    }
  }

  .assets-line {
    margin-top: 20px;

    .assets-line-top {
      margin-bottom: 10px;
      font-size: 12px;

      .assets-top-label {
        font-size: 16px;
        font-weight: 400;
        margin-right: 15px;
      }
    }

    .assets-line-body {
      padding: 20px 30px;
      background-color: #eeeded;

      .assets-body-label {
        font-size: 13px;
        margin-bottom: 10px;
      }

      .assets-body-value {
        font-size: 20px;
      }
    }
  }
}

.dialog-icon {
  width: 10px;
  height: 10px;
  color: #e6a23c;
  margin-right: 10px;
}
</style>